<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style-type: none;
    }
    html{
        font-size: 15px;
    }
    body{
        width: 100%;
        min-height: 100vh;
        display: flex;
        align-items: flex-end;
    }
    .container{
        display: flex;
        width: 100%;
        justify-content: center;
        background-color: #eee;
        height: 8rem;
        overflow: hidden;
    }
    .dock{
        display: flex;
        justify-content: center;
        align-items: center;
        --scale: 1;
        transition: 10s all ease-out;
    }
    .dock li{
        font-size: calc(4.5rem * var(--scale));
        padding: 0.5rem;
        cursor: default;
        
       
    }
</style>
<body>
    <div class="container">
        <ul class="dock">
            <li>😁</li>
            <li>😔</li>
            <li>💗</li>
            <li>💪</li>
            <li>🐇</li>
        </ul>
    </div>
    <script>
        const lis = document.querySelectorAll(".dock li")
        lis.forEach((liItem)=>{
            liItem.addEventListener("mousemove",(e)=>{
                console.log(e.target.getBoundingClientRect());
                let liItemRect = e.target.getBoundingClientRect();
                // console.log(e.clientX);
                let offset = Math.abs(e.clientX - liItemRect.left) / liItemRect.width;
               
                let prev = e.target.previousElementSibling || null;
                let next = e.target.nextElementSibling || null;

                let scale = 0.6;
                resetScale();
                if(prev){
                    prev.style.setProperty('--scale',1 + scale * Math.abs(offset -1));
                }
                e.target.style.setProperty('--scale',1 + scale);
                if(next){
                    next.style.setProperty('--scale',1 + scale * offset);
                }

            })
        });
        
        document.querySelector('.dock').addEventListener('mouseleave',(e)=>{
            resetScale();
        });

        function resetScale(){
            document.querySelectorAll('.dock li').forEach((liItem)=>{
                liItem.style.setProperty('--scale', 1);
            })
        }
    </script>
</body>

</html>